<template>
	<view>
		<view class="title">
			<text>提货券充值</text>
			<view class="line"></view>
		</view>
		<view class="card_num">
			<view class="card">卡号</view>
			<view class="input_box">
				<input type="text" placeholder-class="input_plac" placeholder="请填写卡号" v-model="card_no">
			</view>
		</view>
		<view class="card_num">
			<view class="card">密码</view>
			<view class="input_box">
				<input :type="eye?'text':'password'" placeholder-class="input_plac" placeholder="请填写密码" v-model="card_pin">
				<view class="image_box" @click.stop="eye = !eye">
					<image src="@/static/eye@1.png" v-if="eye"></image>
					<image src="@/static/eye@2.png" v-else></image>
				</view>
			</view>
		</view>
		<view class="btn" @click="navBindJuan">
			下一步
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			eye: false,
			card_no: '',
			card_pin: '',

		}
	},
	methods: {
		balance() {
			let balancePrice = {}
			this.$http({
				url: 'api/wechat/getCardBalance',
				data: {
					card_no: this.card_no,
					card_pin: this.card_pin
				}
			}).then(res => {
				uni.showToast({
					title: res.msg,
					icon: "none"
				})
				balancePrice = {
					a: res.data,
					b: this.card_no,
					c: this.card_pin
				}
				console.log(balancePrice, '....余额')

				uni.navigateTo({
					url: "/personalData/QUANTopUp/QUANTopUp?a=" + encodeURIComponent(JSON.stringify(balancePrice))
				})
			}).catch(err => {

				console.log(err)
				uni.showToast({
					title: err.msg,
					icon: "none"
				})
			})

		},
		// 下一步跳转
		navBindJuan() {
			this.balance()
			// if(this.card_no !== '' && this.card_pin !== '' ) {
			// 	uni.navigateTo({
			// 	url: "/personalData/bindJuan/bindJuan"
			// })
			// }else {

			// }

		}
	}
}
</script>
<style>
.input_plac {
	font-size: 28rpx;
	font-family: Source Han Sans CN-Regular, Source Han Sans CN;
	font-weight: 400;
	color: #888888;
	line-height: 1em;
}
</style>
<style lang="scss" scoped>
.title {
	font-size: 36rpx;
	font-family: Source Han Sans CN-Medium, Source Han Sans CN;
	font-weight: 500;
	color: #222222;
	line-height: 1em;
	margin: 30rpx 0 0 30rpx;
	display: inline-block;
	position: relative;

	.line {
		width: 100%;
		height: 16rpx;
		background: rgba(249, 77, 41, 0.06);
		position: absolute;
		bottom: -6rpx;
	}
}

.card_num {
	width: 100%;
	padding: 0 30rpx;
	box-sizing: border-box;
	margin-top: 54rpx;

	.card {
		font-size: 28rpx;
		font-family: Source Han Sans CN-Medium, Source Han Sans CN;
		font-weight: 500;
		color: #222222;
	}

	.input_box {
		width: 690rpx;
		height: 108rpx;
		background: #FFFFFF;
		box-shadow: inset 0rpx 6rpx 12rpx 2rpx rgba(249, 77, 41, 0.1);
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		opacity: 1;
		padding: 0 24rpx;
		box-sizing: border-box;
		margin-top: 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;

		input {
			width: 100%;
			height: 100%;
		}

		.image_box {
			width: 50rpx;
			height: 100%;
			display: flex;
			justify-content: center;
			align-items: center;

			image {
				width: 24rpx;
				height: 24rpx;
				flex-shrink: 0;
			}
		}

	}
}

.btn {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 690rpx;
	height: 96rpx;
	background: linear-gradient(360deg, #F99529 0%, #F94D29 100%);
	border-radius: 83rpx 83rpx 83rpx 83rpx;
	font-size: 36rpx;
	font-family: Source Han Sans CN-Medium, Source Han Sans CN;
	font-weight: 500;
	color: #FFFFFF;
	position: fixed;
	left: 50%;
	bottom: 80rpx;
	transform: translateX(-50%);
}
</style>
